<template>
  <div class="orderDes">

      <p class="allTitle"><a onclick="window.history.go(-1)"></a>订单详情</p>
      
      <p class="loading" v-if="!loadStart"><span></span></p>

      <div class="orderTop" v-if="loadStart">
          <p class="name">收件人：{{date.order_username}}<span class="tel">{{date.order_mobile}}</span></p>
          <p class="add">收件地址：{{addTa}}{{addTb}}{{addTc}}{{date.order_address}}</p>
      </div>

      <div class="orderInfo" v-if="loadStart">
          <div class="listTop">
            商品列表
          </div>
          <div class="listCont" v-for="item in date.order_items">
            <img :src="item.goods_logo" :onerror="imgError">
            <div class="info">
              <p class="stitle">{{item.goods_name}}</p>
              <p class="num"><span class="price">{{item.goods_price}}</span> x {{item.goods_count}} </p>
            </div>
          </div>
          <div class="listBotton">
            <button>退款</button>
          </div>
      </div>

      <div class="orderAddress">
        
      </div>

      <div class="orderMore" v-if="loadStart">
          <p>订单编号：{{date.trade_no}}</p>
          <p>下单时间：{{date.created_at}}</p>
          <p>订单状态：{{date.status|startList}}</p>
      </div>
  </div>
</template>

<script>
import {Get} from '@/config/api.js'
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'order',
  data () {
    return {
      date:'',
      addTa:'',
      addTb:'',
      addTc:'',
      loadStart:false
    }
  },
  computed:{
      ...mapState({
      imgError: 'imgError'
    })
  },
  mounted(){
    this.getData()
  },
  filters:{
    startList:function(e){
        switch(e) 
          { 
          case 1: 
            return '未付款'
            break; 
          case 2: 
            return '已付款待发货'
            break; 
          case 3: 
            return '已发货'
            break;
          case 4: 
            return '已收货'
            break;
          case 5: 
            return '已评价'
            break;
          case 6: 
            return '关闭'
            break;
          default: 
            return '错误状态'
          } 
    }
  },
  methods:{
    getData(){
      let that=this
      Get('/order/'+this.$route.query.id+'?_include=user,order_items,address,city,province,region',this.$store.state.token).then(function(reg){
        that.date=reg.data
        that.loadStart=true
        if(that.date.address!=undefined){
          that.addTa=that.date.address.province.name
          that.addTb=that.date.address.region.name
          that.addTc=that.date.address.city.name
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">

$vw:750;
@function h($px){@return $px/$vw*100vw}

.orderDes{padding-bottom: h(120)}
.orderTop{padding: h(30);background: url('/static/images/orderLine.png') no-repeat bottom #fff;background-size: 100% auto;font-size: h(28);color: #666}
.orderTop .name{padding-bottom: h(10)}
.orderTop .name span{float: right}
.orderTop .add{}

.orderInfo{margin-top:h(20);background: #fff;overflow:hidden;position:relative;padding-bottom: h(20)}
.orderInfo .listTop{line-height: h(90);padding: 0 h(30);font-size: h(36);background: #fff;overflow:hidden;}
.orderInfo .listTop span{font-size: h(30);float: right}
.listCont{padding: h(20) h(30);overflow: hidden;background: #f5f5f5;}
.listCont img{width: h(160);height: h(160);float: left;}
.listCont .info{width: h(500);padding-left: h(20);float: left;text-align: left;color: #406266;font-size: h(28);}
.listCont .info .stitle{height:h(82);overflow: hidden;color: #666}
.orderInfo button{width: h(180);height: h(60);border: none;border-radius: h(6);background: #38b6f0;font-size: h(36);color: #fff;position:absolute;right: h(20);bottom: h(40)}
.listCont .num{font-size: h(28);margin-top: h(10)}
.listCont .price{color: #fd7b58}

.orderMore{margin-top: h(20);padding: h(10) h(30);background: #fff;font-size: h(30);color: #7c8e90;line-height: h(60)}
</style>
